<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合成历史</title>
    <link rel="stylesheet" href="../common/common.css">
    <link rel="stylesheet" href="synthesis_history.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔬 合成历史记录</h1>
            <div class="user-info">
                <img src="{{playerAvatar}}" alt="头像" class="avatar">
                <div class="user-details">
                    <div class="username">{{username}}</div>
                    <div class="user-level">工坊等级: {{workshopLevel}}</div>
                    <div class="money">金币: {{money}}</div>
                </div>
            </div>
        </div>

        <div class="statistics-section">
            <h2>📊 合成统计</h2>
            <div class="stats-grid">
                <div class="stat-card total">
                    <div class="stat-icon">🧪</div>
                    <div class="stat-info">
                        <div class="stat-label">总合成次数</div>
                        <div class="stat-value">{{totalAttempts}}</div>
                    </div>
                </div>
                <div class="stat-card success">
                    <div class="stat-icon">✅</div>
                    <div class="stat-info">
                        <div class="stat-label">成功次数</div>
                        <div class="stat-value">{{successCount}}</div>
                    </div>
                </div>
                <div class="stat-card rate">
                    <div class="stat-icon">📈</div>
                    <div class="stat-info">
                        <div class="stat-label">成功率</div>
                        <div class="stat-value">{{successRate}}%</div>
                    </div>
                </div>
                <div class="stat-card streak">
                    <div class="stat-icon">🔥</div>
                    <div class="stat-info">
                        <div class="stat-label">最高连胜</div>
                        <div class="stat-value">{{maxStreak}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="filter-section">
            <h3>🔍 筛选选项</h3>
            <div class="filter-controls">
                <div class="filter-group">
                    <label>结果筛选:</label>
                    <div class="filter-buttons">
                        <button class="filter-btn active" data-filter="all">全部</button>
                        <button class="filter-btn" data-filter="success">成功</button>
                        <button class="filter-btn" data-filter="failed">失败</button>
                    </div>
                </div>
                <div class="filter-group">
                    <label>时间筛选:</label>
                    <div class="filter-buttons">
                        <button class="filter-btn active" data-time="all">全部</button>
                        <button class="filter-btn" data-time="today">今日</button>
                        <button class="filter-btn" data-time="week">本周</button>
                        <button class="filter-btn" data-time="month">本月</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="history-section">
            <h2>📜 合成记录</h2>
            <div class="history-list">
                {{#each historyRecords}}
                <div class="history-item {{result}}" data-date="{{date}}">
                    <div class="record-header">
                        <div class="record-time">
                            <span class="time-icon">🕐</span>
                            <span class="time-text">{{formatTime timestamp}}</span>
                        </div>
                        <div class="record-result {{result}}">
                            {{#if (eq result 'success')}}
                            <span class="result-icon">✅</span>
                            <span class="result-text">合成成功</span>
                            {{else}}
                            <span class="result-icon">❌</span>
                            <span class="result-text">合成失败</span>
                            {{/if}}
                        </div>
                    </div>
                    
                    <div class="record-content">
                        <div class="materials-section">
                            <h4>🧱 使用材料</h4>
                            <div class="materials-list">
                                {{#each materials}}
                                <div class="material-item">
                                    <span class="material-icon">{{icon}}</span>
                                    <span class="material-name">{{name}}</span>
                                    <span class="material-count">×{{count}}</span>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                        
                        <div class="recipe-section">
                            <h4>📋 合成配方</h4>
                            <div class="recipe-info">
                                <span class="recipe-icon">{{recipe.icon}}</span>
                                <span class="recipe-name">{{recipe.name}}</span>
                                <span class="recipe-level">Lv.{{recipe.level}}</span>
                            </div>
                        </div>
                        
                        {{#if (eq result 'success')}}
                        <div class="result-section success">
                            <h4>🎁 获得物品</h4>
                            <div class="result-items">
                                {{#each resultItems}}
                                <div class="result-item {{quality}}">
                                    <span class="item-icon">{{icon}}</span>
                                    <span class="item-name">{{name}}</span>
                                    <span class="item-count">×{{count}}</span>
                                    {{#if quality}}
                                    <span class="item-quality">{{quality}}</span>
                                    {{/if}}
                                </div>
                                {{/each}}
                            </div>
                        </div>
                        {{else}}
                        <div class="result-section failed">
                            <h4>💔 失败原因</h4>
                            <div class="failure-reason">
                                <span class="reason-icon">⚠️</span>
                                <span class="reason-text">{{failureReason}}</span>
                            </div>
                        </div>
                        {{/if}}
                        
                        <div class="cost-section">
                            <h4>💰 消耗成本</h4>
                            <div class="cost-info">
                                <div class="cost-item">
                                    <span class="cost-icon">💰</span>
                                    <span class="cost-label">金币:</span>
                                    <span class="cost-value">{{cost.money}}</span>
                                </div>
                                {{#if cost.energy}}
                                <div class="cost-item">
                                    <span class="cost-icon">⚡</span>
                                    <span class="cost-label">能量:</span>
                                    <span class="cost-value">{{cost.energy}}</span>
                                </div>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                    
                    <div class="record-footer">
                        <div class="experience-gain">
                            {{#if experienceGain}}
                            <span class="exp-icon">⭐</span>
                            <span class="exp-text">获得经验: +{{experienceGain}}</span>
                            {{/if}}
                        </div>
                        <div class="record-id">
                            <span class="id-text">记录ID: {{id}}</span>
                        </div>
                    </div>
                </div>
                {{/each}}
            </div>
            
            {{#unless historyRecords.length}}
            <div class="empty-history">
                <div class="empty-icon">📭</div>
                <div class="empty-text">暂无合成记录</div>
                <div class="empty-hint">开始你的第一次合成吧！</div>
            </div>
            {{/unless}}
        </div>

        <div class="analysis-section">
            <h2>📈 数据分析</h2>
            <div class="analysis-grid">
                <div class="analysis-card">
                    <h4>🎯 最常合成</h4>
                    <div class="top-recipes">
                        {{#each topRecipes}}
                        <div class="top-item">
                            <span class="item-icon">{{icon}}</span>
                            <span class="item-name">{{name}}</span>
                            <span class="item-count">{{count}}次</span>
                        </div>
                        {{/each}}
                    </div>
                </div>
                
                <div class="analysis-card">
                    <h4>💎 最佳收益</h4>
                    <div class="best-profits">
                        {{#each bestProfits}}
                        <div class="profit-item">
                            <span class="item-icon">{{icon}}</span>
                            <span class="item-name">{{name}}</span>
                            <span class="profit-value">+{{profit}}金币</span>
                        </div>
                        {{/each}}
                    </div>
                </div>
                
                <div class="analysis-card">
                    <h4>⏰ 活跃时段</h4>
                    <div class="active-hours">
                        {{#each activeHours}}
                        <div class="hour-item">
                            <span class="hour-time">{{hour}}:00</span>
                            <div class="hour-bar">
                                <div class="hour-fill" style="width: {{percentage}}%"></div>
                            </div>
                            <span class="hour-count">{{count}}次</span>
                        </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="tips-section">
                <h3>💡 合成小贴士</h3>
                <ul>
                    <li>工坊等级越高，合成成功率越高</li>
                    <li>使用高品质材料可以提升成功率</li>
                    <li>连续合成会有额外的经验加成</li>
                    <li>定期查看合成历史，总结经验规律</li>
                    <li>合理安排合成时间，避免材料浪费</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>